<script setup>
import { ref } from 'vue'
import { Plus, Upload } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores'
import { userUpdateAvatarService } from '@/api/user'
const userStore = useUserStore()
const uploadRef = ref()
const imageUrl = ref(userStore.user.user_pic)

// 在on-change事件中可以自动获取一个参数，参数中包含上传图片的基本信息
const onSelectFile = (uploadFile) => {
  //  1、预览上传的图片
  // imageUrl.value = URL.createObjectURL(uploadFile.raw)
  // 2、基于FileReader 读取图片做预览，并且图片格式是base64格式的
  // （1）创建一个FileReader对象
  const reader = new FileReader()
  // （2）使用readAsDataURL方法将上传的文件以base64格式读取为数据
  reader.readAsDataURL(uploadFile.raw)
  // （3）如果不适用reader.onload事件会出现以下几种问题：
  // （3.1）数据未完全读取：reader.result的值可能在文件读取过程中尚未完成，导致获取到的数据不完整或不正确。
  // （3.2）异步操作未完成：reader.readAsDataURL()是一个异步操作，需要等待文件读取完成后才能获取到结果。如果不使用reader.onload事件，代码可能会在文件读取完成之前继续执行，导致imageUrl.value的值不正确。
  // （3.3）错误处理困难：如果文件读取过程中发生错误，直接赋值可能会导致错误被忽略或无法捕获。使用reader.onerror事件可以更好地处理错误情况。
  reader.onload = () => {
    imageUrl.value = reader.result
  }
}
// 上传头像
const onUpdatedAvatar = async () => {
  // 发送请求更新头像
  await userUpdateAvatarService(imageUrl.value)
  // userStore重新渲染
  await userStore.getUser()
  // 提示用户成功
  ElMessage.success('头像更新成功')
}
</script>

<template>
  <page-container title="更换头像">
    <!-- :show-file-list="false"  是否显示文件列表
    :auto-upload="false"   是否自动上传文件 -->
    <el-upload
      class="avatar-uploader"
      :action="imageUrl"
      :show-file-list="false"
      :auto-upload="false"
      ref="uploadRef"
      :on-change="onSelectFile"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
    </el-upload>
    <!-- uploadRef    Vue 组件或el-upload的DOM 元素的引用
    $el  是 Vue 中组件的原生 DOM 元素
    querySelector('input')   用于在 DOM 树中查找指定选择器的第一个匹配元素。在这里，它查找了 <input> 元素。
    .click()   是 DOM 元素的原生方法，用于触发该元素的点击事件。 -->
    <el-button
      type="primary"
      size="large"
      :icon="Plus"
      @click="uploadRef.$el.querySelector('input').click()"
      >选择头像</el-button
    >
    <el-button type="success" size="large" :icon="Upload" @click="onUpdatedAvatar"
      >上传头像</el-button
    >
  </page-container>
</template>

<style lang="scss" scoped>
.avatar-uploader {
  :deep() {
    .avatar {
      width: 278px;
      height: 278px;
      display: block;
    }
    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }
    .el-upload:hover {
      border-color: var(--el-border-primary);
    }
    .el-icon,
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 278px;
      height: 278px;
      text-align: center;
    }
  }
}
.editor {
  width: 100%;
  :deep(.ql-editor) {
    min-height: 200px;
  }
}
</style>
